<template>
	<view class="admin-picture-container">
		<view v-for="(item,index) in data.bannerList" :key="index">
			<AdminPictureItem :bannerInfo="item" :bannerIndex="index" @deletel="deleteOne" @moveUp="moveUp" @moveDown="moveDown"></AdminPictureItem>
		</view>
	</view>
	<view class="admin-picture-edit-btn-container">
		<button class="admin-picture-delete-btn" @tap="deleteAll">全部删除</button>
		<button class="admin-picture-add-btn" @tap="goAdd">新增图片</button>
	</view>
	<button class="admin-picture-send-btn" @tap="sendAdd">发送修改</button>
</template>

<script>
	import {onMounted,reactive} from 'vue'
	import {onShow} from '@dcloudio/uni-app'
	import AdminPictureItem from '../components/admin-picture-item.vue'
	import global from '../../config/global.js'
	export default {
		name:'admin-picture',
		components:{
			AdminPictureItem
		},
		setup(){
			let data = reactive({
				bannerList:[]
			})
			
			onMounted(()=>{
				getData();
			})
			
			onShow(()=>{
				let t = uni.getStorageSync('add')
				let t2 = uni.getStorageSync('changel')
				// console.log(t)
				if(t != null&&t != ""){
					data.bannerList.push(t)

				}
				if(t2 != null&&t2 != ""){
					let v = t2.index
					delete t2.index
					// console.log(v,t2)
					data.bannerList[v] = t2
				}
				uni.removeStorageSync('add')
				uni.removeStorageSync('changel')
				
			})
			
			function deleteAll(){
				data.bannerList=[]
			}
			
			function getData(){
				uni.request({
					url:global.BASE_URL+'/banner/catch/all',
					method:"GET",
					success: (res) => {
						if(res.data.code){
							data.bannerList = res.data.data
						}
					},
					fail:(err)=>{
						console.log(err)
					}
				})
			}
			
			function moveUp(v){
				if(!v){
					uni.showToast({
						icon:'fail',
						title:'不可上移',
						duration:1000
					})
				}else{
					swapElements(data.bannerList, v-1, v);
				} 
				console.log(data.bannerList)
			}
			
			function moveDown(v){
				if(v==data.bannerList.length-1){
					uni.showToast({
						icon:'fail',
						title:'不可下移',
						duration:1000
					})
				}else{
					swapElements(data.bannerList, v+1, v);
				} 
			}
			
			function swapElements (myArray, index1, index2){
				[myArray[index1], myArray[index2]] = [myArray[index2], myArray[index1]];
			}
			
			function goAdd(){
				uni.navigateTo({
					url:'/page_admin/admin/admin-picture-add'
				})
			}
			
			function deleteOne(v){
				// console.log(v)
				data.bannerList.splice(v,1)
			}
			
			function sendAdd(){
				for(let i=1;i<=data.bannerList.length;i++){
					data.bannerList[i-1].sequence = i;
				}
				uni.request({
					url:global.BASE_URL+'/banner/insert',
					method:"POST",
					header:{
						"mytoken":uni.getStorageSync("localtoken")
					},
					data:data.bannerList,
					success: (res) => {
						if(res.data.code){
							uni.reLaunch({
								url:'/pages/index/index'
							})
						}
					},
					fail: (err) => {
						console.log(err)
					}
				})
			}
			
			return {
				data,
				moveUp,
				moveDown,
				goAdd,
				deleteAll,
				deleteOne,
				sendAdd,
			}
		}
	}
</script>

<style scoped>
	.admin-picture-edit-btn-container{
		width: 600rpx;
		margin: 40rpx 75rpx;
		display: flex;
		justify-content: space-between;
	}
	
	.admin-picture-delete-btn{
		width: 250rpx;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #DE6868;
		color: white;
		font-size: 28rpx;
	}
	
	.admin-picture-add-btn{
		width: 250rpx;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #9BCDD2;
		color: white;
		font-size: 28rpx;
	}
	
	.admin-picture-send-btn{
		width: 400rpx;
		height: 75rpx;
		line-height: 75rpx;
		margin: 60rpx 175rpx;
		background-color: #9BCDD2;
		color: white;
		font-size: 35rpx;
	}
</style>
